<template>
  <div class="user-box">
    <div class="onebet-form" id="myForm">
      <h3>修改密码</h3>
      <div class="form-box">
        <div>
          <label><i class="iconfont">&#xe769;</i></label>
          <input type="text" placeholder="邮箱" v-model="info.receiver" name="receiver" ref="receiver"
                 @blur="handleBlur"/>
          <span class="hiden" ref="receiver_empty">邮箱不能为空</span>
          <span class="hiden" ref="receiver_span">您输入的邮箱格式有误</span>
        </div>
        <div>
          <label><i class="iconfont">&#xe7af;</i></label>
          <input type="text" placeholder="验证码" v-model="info.code" name="code" ref="code" class="code-input"
                 @blur="handleBlur"/>
          <span :class="handeleCode?'verification-active':'verification-code'" @click="getCode">{{phoneCodemsg}}</span>
          <span class="hiden" ref="code_empty">验证码不能为空</span>
          <span class="hiden" ref="code_span">验证码不能为空</span>
        </div>
        <div>
          <label><i class="iconfont">&#xe614;</i></label>
          <input type="password" placeholder="新密码" v-model="info.password" name="password" ref="password"
                 @blur="handleBlur"/>
          <span class="hiden" ref="password_empty">密码不能为空</span>
          <span class="hiden" ref="password_span">密码必须由6-16位字母和数字组成</span>
        </div>
        <div class="submit marginTop" @click="handleUpdatepwd">修改密码</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Api from '@/axios/api/api'

  let rejson = {
    password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
    receiver: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    code: /\S/
  }
  export default {
    name: 'resetpwd',
    data() {
      return {
        info: {
          receiver: '',
          password: '',
          code: ''
        },
        codeTimer: null,
        handeleCode: false,
        phoneCodemsg: '发送验证码',
        countdown: 60
      }
    },
    methods: {
      getCode() {
        let self = this
        if (self.countdown !== 60) return false
        if (!self.info.receiver) {
          this.$refs.receiver_span.className = 'hiden'
          this.$refs.receiver_empty.className = 'errShow'
        } else if (!rejson.receiver.test(this.info.receiver)) {
          this.$refs.receiver_empty.className = 'hiden'
          this.$refs.receiver_span.className = 'errShow'
        } else {
          let params = {
            receiver: this.info.receiver
          }
          self.handleCountdown()
          Api.sendCode(params).then(res => {
            let result = res.data
            if (result.code === 0) {
              this.$message.success('发送成功')
              self.handleCountdown()
            } else {
              this.$message.error(result.message)
            }
          })
        }
      },
      handleCountdown() {
        let self = this
        if (self.countdown !== 60) return false
        self.handeleCode = !self.handeleCode
        if (!self.handeleCode) return false
        self.phoneCodemsg = self.countdown + 's后重新获取'
        clearInterval(self.codeTimer)
        self.codeTimer = setInterval(() => {
          self.countdown = self.countdown - 1
          if (self.countdown > 0) {
            self.phoneCodemsg = self.countdown + 's后重新获取'
          } else {
            self.countdown = 60
            self.phoneCodemsg = '发送验证码'
            self.handeleCode = false
            clearInterval(self.codeTimer)
          }
        }, 1000)
      },
      handleBlur(event) {
        let currentEl = event.target.name
        let currentVal = event.target.value
        if (currentVal) {
          this.$refs[currentEl + '_empty'].className = 'hiden'
          this.$refs[currentEl + '_span'].className = 'hiden'
          if (rejson[currentEl]) {
            if (rejson[currentEl].test(event.target.value)) {
              this.$refs[currentEl + '_span'].className = 'hiden'
            } else {
              this.$refs[currentEl + '_span'].className = 'errShow'
            }
          }
        } else {
          this.$refs[currentEl + '_empty'].className = 'errShow'
        }
      },
      handleUpdatepwd() {
        let bOk = true
        for (let name in rejson) {
          if (this.info[name] !== '') {
            this.$refs[name + '_empty'].className = 'hiden'
            this.$refs[name + '_span'].className = 'hiden'
            if (!rejson[name].test(this.info[name])) {
              this.$refs[name + '_span'].className = 'errShow'
              bOk = false
            } else {
              this.$refs[name + '_span'].className = 'hiden'
            }
          } else {
            bOk = false
            this.$refs[name + '_empty'].className = 'errShow'
          }
        }
        if (!bOk) {
          return false
        }
        this.$router.push({
          path: '/login'
        })
        Api.updatePassword(this.info).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.$message.success('更新信息成功')
            this.$router.push({
              path: '/login'
            })
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handlejump(index) {
        this.$router.push({
          path: '/' + index
        })
      },
      resizeChange() {
        let oW = document.body.clientWidth
        let oFrom = document.getElementById('myForm')
        if (oW < 1500) {
          oFrom.className = 'onebet-form-min'
        } else {
          oFrom.className = 'onebet-form'
        }
      }
    },
    mounted() {
      let vm = this
      vm.resizeChange()
      window.onresize = function () {
        vm.resizeChange()
      }
    }
  }
</script>

<style scoped>

</style>
